<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="add">
            品牌名称:
            <input type="text" v-model="name">
            <input :disabled="name.length===0" @click="addItem" type="button" value="添加">
        </div>

        <div class="add">
            品牌名称:
            <input type="text" placeholder="请输入搜索条件" v-model="searchVal">
        </div>

        <div>
            <table class="tb">
                <tr>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>创立时间</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in newlist" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.date | fmDate}}</td>
                    <td>
                        <a href="#" @click.prevent="deleItem(index)">删除</a>
                    </td>
                </tr>
                <tr v-if="newlist.length===0">
                    <td colspan="4">没有品牌数据</td>
                </tr>
            </table>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script src="./moment.js"></script>
    <script>
        /* 
        1. 静态页面 准备
        2. 实例化一个Vue
        3. 定义表格数据
        4. 采用v-for 循环将静态内容切换为动态内容
        5. 采用v-if控制提示消息
        */
        // 准备数据
        //过滤器过滤日期
        Vue.filter('fmDate', function(v){
            return moment(v).format("YYYY-MM-DD h:mm:ss");
        });
        new Vue({
            el: '#app',
            data: {
                // 模拟ajax的数据
                list: [{
                    name: '大娃',
                    date: new Date()
                }, {
                    name: '二娃',
                    date: new Date()
                }, {
                    name: '三娃',
                    date: new Date()
                }],
                // 我要添加的数据
                name: '',
                searchVal: ''
            },
            methods: {
                // 添加
                addItem() {
                    this.list.unshift({
                        name: this.name,
                        date: new Date()
                    })
                    this.name = ''
                },
                // 删除
                deleItem(index) {
                    if (confirm('是否删除')) {
                        this.list.splice(index, 1)
                    }
                }
            },
            computed: {
                newlist: function() {
                    return this.list.filter((v) => v.name.startsWith(this.searchVal));
                }
            }
        })
    </script>
</body>

</html>